<script setup lang="ts">
import {ref, h, reactive, onMounted} from 'vue';
import container from "../../components/container.vue";
import {IconCalendar} from '@arco-design/web-vue/es/icon';
import {storeToRefs} from "pinia";
import {useTag} from "../../store/tag.ts"


onMounted(() => {
})
const {openTags} = storeToRefs(useTag())
// console.log('#####', openTags)
const expandedKeys = ref([]);

const rowSelection = reactive({
  type: 'checkbox',
  showCheckedAll: true,
  checkStrictly: true
});

//显示隐藏模态框
const modalvisible = ref(false)
//菜单类型
const menuType = ref({})

const add = () => {
  modalvisible.value = true
}
const handleOk = (event) => {
  console.log('点击确定', event);
  modalvisible.value = false
}

const show = ref(true)

const data = [{
  key: '4',
  name: '2222',
  address: '舒服的地方',
  email: '000'
}, {
  key: '5',
  name: '11',
  address: '说的方法',
  email: '111'
}];
const fieldNames = {value: 'pagsNum', label: 'text'}
const value = ref('p10')
const select_option = reactive([
  {
    pagsNum: 'p10',
    text: '10 条 / 页'
  },
  {
    pagsNum: 'p20',
    text: '20 条 / 页'
  },
  {
    pagsNum: 'p30',
    text: '30 条 / 页'
  },
  {
    pagsNum: 'p50',
    text: '50 条 / 页'
  },
]);


const form = reactive({
  //名称
  name: '',
  //备注
  remarks: '',
  //排序
  order:0,
});
const handleSubmit = (data) => {
  console.log(data);
};
</script>

<template>
  <container :displayNavigation="true">
    <div class="role_table">
      <a-button type="primary" @click="add">
        <template #icon>
          <icon-plus/>
        </template>
        <template #default>添加</template>
      </a-button>
      <a-table  :data="data" style="margin-top: 20px"
               :scrollbar="false">
        <template #columns>
          <a-table-column title="ID" data-index="name"></a-table-column>
          <a-table-column title=" 名称 " data-index="name"></a-table-column>
          <a-table-column title="备注" data-index="address"></a-table-column>
          <a-table-column title="排序" data-index="email"></a-table-column>
          <a-table-column title="管理人员数">
            <template #cell="{ record }">
              <a-space size="操作">
                <a-button @click="" size="mini" type="primary">编辑</a-button>
                <a-button @click="" size="mini" type="primary" status="danger">删除</a-button>
              </a-space>
            </template>
          </a-table-column>
        </template>
        <template #pagination-left>
          共 1000 条
        </template>
        <template #pagination-right>
          <a-select :style="{width:'140px'}" :options="select_option" v-model="value" :field-names="fieldNames"
                    placeholder="sss" size="large">
          </a-select>
        </template>
      </a-table>
    </div>

    <!-- [模态框 start] ==========================================================  -->
    <a-modal v-model:visible="modalvisible" @ok="handleOk">
      <template #title>
        新增角色
      </template>
      <a-form :model="form" >
        <a-form-item field="name"  label="名称" required
                     :rules="[{required:true,message:'名称必填'},{minLength:5,message:''}]"
                     :validate-trigger="['change','input']"
        >
          <a-input
              v-model="form.name"
              placeholder="请输入名称"
          />
        </a-form-item>
        <a-form-item field="post" label="备注">
          <a-textarea v-model="form.remarks"  placeholder="请输入备注" :max-length="200" allow-clear show-word-limit />
        </a-form-item>
        <a-form-item field="post" label="排序">
          <a-input-number v-model="form.order" :style="{width:'180px'}" :min="0"  max="10000" mode="button" size="large" class="input-demo" />
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- [模态框 end] ==========================================================  -->

  </container>
</template>

<style scoped lang="scss">
.addMenuform {
  text-align: center;
}

.role_table {
  background: #fff;
  padding: 20px;
  margin-top: 20px;
  border-radius: 8px;
}

</style>



